<template>
    <div class="tmpl">
        <nav-bar :title="title"></nav-bar>
        <div class="news-title">
            <p v-text="newsDetail.title"></p>
            <div>
                <span>{{newsDetail.click}}次点击</span>
                <span>分类：民生经济</span>
                <span>添加时间：{{newsDetail.add_time | convertDate}}</span>
            </div>
        </div>
        <div class="news-content" v-html="newsDetail.content"></div>
    </div>
</template>

<script>
   export default {
    data(){
        return {
            newsDetail: {},
            title: ''
        }
    },
   created(){
       let id = this.$route.query.id;
       this.$ajax.get('apiList?id=' + id)
       .then(res=>{
           this.newsDetail = res.data.desc;
        //    console.log(res.data.desc)
       })
       .catch(err=>{
           console.log(err)
       })
   },
//    钩子
   beforeRouteEnter(to, from, next){
       console.log(from.name);
       let myTitle = '';
       if(from.name === 'news.list'){
            myTitle = '新闻列表哦'
       }else if(from.name === 'goods.detail'){
           myTitle = '商品详情哦'
       }
    //    一定要调用next 否则没有任何效果
       next(vm => {
           vm.title = myTitle
       })
   }
 }
</script>

<style scoped>
    .news-title p{
        color: #0A87F8;
        font-size: 20px;
        font-weight: bold;
    }
    .news-title span{
        margin-right: 30px;
    }
    .news-title{
        margin-top: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .news-content{
        padding: 10 5;
    }
</style>
